<template>
	<view :style="{height: height}">
		<mescroll-uni ref="mescrollRef" :top="top" :fixed="fixed" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
			<view class="problem-list">
				<problemItem v-for="item in historyList" :key="item.id" :item="item" :selectList="selectList" :noTitle="noTitle" @handleSelect="handleSelect" :checkMode="checkMode"></problemItem>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		getProject
	} from '@/api/patrol.js';
	import  problemItem from '@/components/problem_item/index.vue';
	export default {
		components: { problemItem },
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				historyList: [],
				pageSize: 20,
				selectList: [],
			}
		},
		props: {
			id: {
				type: [Number, String],
				default: ''
			},
			type: {
				type: String,
				default: '业主检查'
			},
			state: {
				type: [Number, String],
				default: '2'
			},
			noTitle: {
				type: Boolean,
				default: false
			},
			height: {
				type: String,
				default: '100vh'
			},
			fixed: {
				type: Boolean,
				default: true
			},
			checkMode: {
				type: Boolean,
				default: false
			},
			userName: {
				type: String,
				default: ''
			},
			top: {
				type: Number,
				default: 0
			}
		},
		watch: {
			type() {
				this.initData();
			}
		},
		methods: {
			initData() {
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			handleSelect(id) {
				const idx = this.selectList.indexOf(id)
				if (idx !== -1) {
					this.selectList.splice(idx, 1);
				} else {
					this.selectList.push(id);
				}
				this.$emit('handleSelect', this.selectList);
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},

			/*上拉加载的回调*/
			async upCallback(page) {
				const {
					data
				} = await getProject({
					project_id: this.id,
					pageSize: this.pageSize,
					page: page.num,
					state: this.state,
					check_source: this.type,
					user_name: this.userName,
					check_type: 2,
					user_name: this.type === '业主检查' ? this.userName : ''
				});
				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data;
					curPageData.forEach((item, idx) => {
						curPageData[idx].code = idx + 1 + (page.num - 1) * this.pageSize
					});
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.last_page;
					//设置列表数据
					if (page.num == 1) this.historyList = []; //如果是第一页需手动置空列表
					this.historyList = this.historyList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen)
					}, 20)
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.problem-list {
		width: 100%;
	
		.item {
			border-bottom: solid 2rpx #e2e7f5;
			padding: 0 35rpx;
			box-sizing: border-box;
		}
	
		.project {
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 36rpx;
			letter-spacing: 0rpx;
			color: #000000;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}
	
		.img {
			width: 100%;
			height: 248rpx;
			background-color: #000000;
			border-radius: 35rpx;
			position: relative;
			overflow: hidden;
	
			.img-file {
				width: 100%;
				height: 100%;
			}
	
			.problem-title {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 65rpx;
				background-color: rgba(0, 0, 0, 0.7);
				text-align: center;
				line-height: 65rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 3rpx;
				color: #ffffff;
			}
		}
	
		.info {
			margin-top: 15rpx;
			margin-bottom: 30rpx;
			@include clear();
	
			.info-item {
				float: left;
				width: 25%;
	
				.label {
					height: 30rpx;
					font-family: SourceHanSansCN-Regular;
					font-size: 16rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #8497ac;
					margin-bottom: 3rpx;
				}
	
				.content {
	
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					line-height: 34rpx;
					letter-spacing: 0rpx;
					color: #46464a;
				}
			}
		}
	
	
	
	}
</style>
